<template>
    <div class="wrap">
        <mytop :biaoti='title'></mytop>
        <header>
            <div class="login">
                <img src="" alt="">
                <div class="content">
                    <router-link to="/person/login"><h4>登录/注册</h4>
                    <p>登录后享受更多特权</p>
                    </router-link>
                </div>
            </div>
            <span>></span>
        </header>
        <figure>
            <ul>
                <li><i class="iconfont icon-renminbi" style="font-size:1rem;color:orange;"></i><br>钱包</li>
                <li><i class="iconfont icon-hongbao" style="color:red;"></i><br>红包</li>
                <li><i class="iconfont icon-jinbi" style="color:green;"></i><br>金币</li>
            </ul>
        </figure>
        <section>
            <ul>
                <li><i class="iconfont icon-position" style="color:blue;"></i><span>></span>我的地址</li>
                <li><i class="iconfont icon-shangcheng-active" style="color:green;"></i><span>></span>金币商城</li>
                <li><i class="iconfont icon-liwu1" style="color:red;"></i><span>></span>分享拿5元现金</li>
                <li><i class="iconfont icon-erji" style="color:blue;"></i><span>></span>我的客服</li>
                <li><i class="iconfont icon-eliaomo" style="color:blue;"></i><span>></span>下载饿了么APP</li>
            </ul>
        </section>
    <router-view/>
    </div>
</template>

<script>
import mytop from '@/components/top.vue'
export default {
    name:"person",
    components:{
        mytop:mytop
    },
    data(){
        return {
            title : '我的'
        }
    }
    
}
</script>

<style>
    *{
        margin: 0;
        padding: 0;
    }
    li{
        list-style: none;
    }
    .wrap{
        background-color: #e8e8e8;
        height: 100%;
    }
    .login div.content{
        margin-left: 2.5rem;
    }
    .login div.content a{
        color: white;
        text-decoration: none;
    }
    .login div.content a p{
        color: white;
    }
    .wrap header{
        margin-top: 3.125rem;
        height: 6.25rem;
        background-image: linear-gradient(90deg,#0af,#0085ff);
        color: white;
        display: flex;
        justify-content: space-between;
     }   
    .wrap header span{
        float: right;
        color: white;
        margin-right: 1.875rem;
        line-height: 6.25rem;
    }
    figure ul{
        display: flex;
        width: 100%;
        height: 4.375rem;
    }
    figure ul li{
        padding-top: 10px;
        flex: 1;
        text-align: center;
        background-color: white;
    }
    section ul{
        margin-top: 1.875rem;
        display: flex;
        flex-direction: column;
        height: 14rem;
        margin-bottom: 13.5rem;
    }
    section ul li{
        flex: 1;
        line-height:2.8rem;
        background-color: white;
    }
    section ul li i{
        margin-left: 0.625rem;
        margin-right: 0.625rem;
    }
    section ul li:first-child{
        margin-bottom: 1.25rem;
    }
    section ul li:nth-child(3){
        margin-bottom: 1.25rem;
    }
    section ul li span{
        float: right;
        margin-right: 0.75rem;
        color: #919191;
    }
</style>
